<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>

    用户名：<input type="text" id="username"><span></span><br>
    密码：<input type="text" id="password"><span></span><br>
    重复密码：<input type="text" id="password2"><span></span><br>
    <input type="button" value="提交" id="submit">
    
</body>
<script>

    // - 用户名：数字字母下划线中划线中文，5~10位
    // - 密码：数字字母，6~10位
        // - 任意一种：弱
        // - 两种且长度8-：中
        // - 两种且长度8+：强
    // - 重复密码
    // - 要求：每个输入框输入完成后，立即验证输入框内容，在当前输入框后显示提示语
    // - 要求：点击提交按钮，所有输入框全部正确，提示成功，否则，提示失败

    var oun = document.getElementById("username");
    var opw = document.getElementById("password");
    var opw2 = document.getElementById("password2");
    var osubmit = document.getElementById("submit");
    // 用来记录每个输入框是否成功
    var unIsOk = false;
    var pwIsOk = false;
    var pw2IsOk = false;
    
    oun.oninput = function(){
        // 用户名的正则
        var reg = /^[\w\-\u2e80-\u9fff]{5,10}$/;
        // 验证输入框内容，根据验证结果，显示提示语
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "ok";
            unIsOk = true;
        }else{
            this.nextElementSibling.innerHTML = "no";
            unIsOk = false;
        }
    }

    opw.oninput = function(){
        var str = this.value;
        // 是否出现违规字符，如果出现，提示，结束验证
        if(/[^a-z\d]/i.test(str) || !(/^.{6,10}$/.test(str))){
            this.nextElementSibling.innerHTML = "no";
            pwIsOk = false;
            return;
        }

        pwIsOk = true;

        // 判断是否出现数字和字母。记录
        var a=0;
        var b=0;
        if(/\d/.test(str)){
            a = 1;
        }
        if(/[a-z]/i.test(str)){
            b = 1;
        }
        // 将记录值加起来，判断出现了几种，决定显示的难度登记
        if(a+b === 1){
            this.nextElementSibling.innerHTML = "弱ok";
        }else if(a+b===2 && str.length<8){
            this.nextElementSibling.innerHTML = "中ok";
        }else if(a+b===2 && str.length>=8){
            this.nextElementSibling.innerHTML = "强ok";
        }

        // 在密码框中，验证重复密码
        if(opw2.value === "") return;
        if(this.value === opw2.value){
            opw2.nextElementSibling.innerHTML = "一致";
            pw2IsOk = true;
        }else{
            opw2.nextElementSibling.innerHTML = "不一致";
            pw2IsOk = false;
        }
    }

    opw2.oninput = function(){
        if(this.value === opw.value){
            this.nextElementSibling.innerHTML = "一致";
            pw2IsOk = true;
        }else{
            this.nextElementSibling.innerHTML = "不一致";
            pw2IsOk = false;
        }
    }

    osubmit.onclick = function(){
        // 判断所有输入框状态
        if( unIsOk && pwIsOk && pw2IsOk ){
            alert("成功");
        }else{
            alert("失败");
        }
    }

    
</script>
</html>